 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>api分组</title>
    {include file="public/head"}
    <style>
    </style>
</head>
<body>
<div class="box">
    <button class="layui-btn" id="add">添加分组</button>
    <table id="api_group" lay-filter="table" ></table>
    <div id="page"></div>
</div>

</body>
<div style="display: none;padding: 15px 50px 0 10px;" id="groupAdd">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">分组名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" value="1" lay-text="ON|OFF" lay-skin="switch" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="groupAdd">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll();">取消</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['table','form','layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer=layui.layer;
        table.render({
            elem: '#api_group'
            ,height: 500
            ,url: '/admin/api/group_data' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
                ,{field: 'name', title: '分组名'}
                ,{field: 'status', title: '状态'}
                ,{field: 'create_time', title: '创建时间'}
            ]]
        });

        $("#add").click(function(){
            layer.open({
                type: 1,
                area: ['450px', '300px'],
                content: $('#groupAdd')
            });
        });

        form.on('submit(groupAdd)', function(data){
            $.ajax({
                type:'POST',
                url:'/admin/api/group_add',
                data:data.field,
                success:function(data){
                    console.log(data);
                    if(data){
                        layer.closeAll();
                        layer.msg('操作成功', {
                            icon: 1,
                            time:1000
                        },function(){
                            layer.closeAll();
                            table.reload('api_group', {
                                url: '/admin/api/group_data'
                                ,where: {}
                            });
                        });
                    }else{
                        layer.msg('操作失败', {icon: 5});
                    }
                    return false;
                }
            });
            return false;
        });

    });
</script>
</html>